ARMS用户体验监控针对Web & H5主要监控浏览器页面以及移动应用中的H5页面,通过页面内嵌JS脚本或NPM包的方式,采集应用站点运行过程中的性能指标,追踪异常问题,帮助您提升自身应用站点的用户体验。
阿里云用户体验监控于2023年12月08日开启公测,公测期间您可以免费试用阿里云用户体验监控,如果您在使用中有任何问题,请联系用户体验监控答疑钉钉群(群号:67370002064)获取帮助。
创建监控应用
- 登录ARMS控制台。
在左侧导航栏选择
,并在顶部菜单栏选择目标地域。在应用列表页面单击添加应用。
在创建应用面板单击Web & H5。
在接入Web & H5面板输入应用名称和描述,然后单击创建。
说明应用名称唯一,不能与已创建的应用名称重复。
创建成功后,当前应用将会在STEP2区域自动生成对应的pid和endpoint地址。
在STEP2区域选择安装方式并安装探针SDK。
CDN同步加载
复制下方代码,并粘贴至HTML页面
<body>
中的第一行。说明请将以下代码中的
pid
和endpoint
替换为当前应用对应的pid和endpoint地址。<script> window.__rum = { pid: "your app id", endpoint: "your endpoint" }; </script> <script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js " crossorigin></script>
CDN异步加载
复制下方代码,并粘贴至HTML页面
<body>
中的第一行。说明请将以下代码中的
pid
和endpoint
替换为当前应用对应的pid和endpoint地址。<script> !(function(c,b,d,a){c[a]||(c[a]={});c[a]={ pid: "your app id", endpoint: "your endpoint" }; with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d) })(window, document, "https://sdk.rum.aliyuncs.com/v2/browser-sdk.js ", "__rum"); </script>
npm包
引入npm包。
npm install @arms/rum-browser --save
初始化应用。
说明请将以下代码中的
pid
和endpoint
替换为当前应用对应的pid和endpoint地址。import ArmsRum from '@arms/rum-browser'; ArmsRum.init({ pid: "your app id", endpoint: "your endpoint" });
各安装方式说明如下:
异步加载:又称为非阻塞加载,表示浏览器在下载执行JS之后还会继续处理后续页面。若对页面性能的要求非常高,建议使用此方式。
重要由于是异步加载,ARMS无法捕捉到监控SDK加载初始化完成之前的JS错误和资源加载错误。
同步加载:又称为阻塞加载,表示当前JS加载完毕后才会进行后续处理。如需捕捉从页面打开到关闭的整个过程中的JS错误和资源加载错误,建议使用此方式。
npm包:使用npm包可以减少页面中Script的加载个数,可以自行控制页面Script的CDN业务方向,并可以将用户体验监控作为单独模块进行后续处理。
SDK配置
参数 | 类型 | 描述 | 是否必填 | 默认值 |
pid | string | 应用ID | 是 | - |
endpoint | string | 上报地址 | 是 | - |
env | - | 应用环境:
| 否 | prod |
version | string | 应用版本 | 否 | - |
user | object | User配置 | 否 | user.id由SDK默认生成 |
collectors | object | 各Collector(采集器)配置 | 否 | - |
beforeReport | function | Repoter发送RUM事件之前 | 否 | noop |
User配置
参数 | 类型 | 描述 | 是否必填 | 默认值 |
id | string | 用户ID | 否 | 由SDK默认生成 |
tags | string | 标签 | 否 | - |
name | string | 名称 | 否 | - |
[key: string] | any | 用户自定义Key | 否 | - |
采集器配置
Collector采集器是RUM SDK用于收集页面监控数据的最小单元。目前RUM SDK内置了pv、routeChange、api、static Resource等丰富的采集器。
参数 | 类型 | 描述 | 是否必填 | 默认值 |
routeChange | boolean | object | 监听SPA应用的history/hash路由切换,自动上报PV。 | 否 | true |
api | boolean | object | 监听API请求。 | 否 | true |
staticResource | boolean | object | 监听静态资源请求。 | 否 | true |
consoleError | boolean | object | 监听Console错误。 | 否 | true |
jsError | boolean | object | 监听JS错误。 | 否 | true |
click | boolean | object | 监听用户Click行为。 | 否 | true |
示例
Report上报数据之前拦截修改上报数据。
说明请将以下代码中的
pid
和endpoint
替换为当前应用对应的pid和endpoint地址。ArmsRum.init({ pid: "your app id", endpoint: "your endpoint", // 拦截上报数据。返回null,undefined,0,false等,会取消本次上报。 beforeReport(bundle) { bundle.events = bundle.events.filter(event => event.event_type === 'resource'); return bundle; }, });
使用业务自有账号体系,不建议覆盖SDK生成的user.id,这样可能会对UV的计算产生影响。
说明请将以下代码中的
pid
和endpoint
替换为当前应用对应的pid和endpoint地址。ArmsRum.init({ pid: "your app id", endpoint: "your endpoint", user: { name: getYourUserId() } });
关闭监听用户Click行为。
说明请将以下代码中的
pid
和endpoint
替换为当前应用对应的pid和endpoint地址。ArmsRum.init({ pid: "your app id", endpoint: "your endpoint", collectors: { // action click: false, } });
SDK API
RUM SDK开放API,用于修改上报自定义数据,动态修改SDK配置等。
sendEvent
自定义上传数据。
ArmsRum.sendEvent({
event_type: RumEventType.VIEW,
type: 'pv',
url: 'https://armsnext.console.aliyun.com/b',
referrer: 'https://armsnext.console.aliyun.com/a',
loading_type: 'initial_load',
});
getConfig
获取SDK配置。
setConfig
修改SDK配置。
// 指定 key 设置
ArmsRum.setConfig('env', 'pre');
// 覆盖设置
const config = ArmsRum.getConfig();
ArmsRum.setConfig({
...config,
version: '1.0.0',
env: 'pre',
});
- 本页导读 (1)